<template>
  <div class="ui-shade" v-show="isShow" >
    <div class="modal_cont" @click.self="toggleModal" :class="isShow? 'silderout':''">
      <div class="page_modal">
        <div id="geuige">
          <div class="cose_modal"><span>×</span></div>
          <div class="goods_intro flex-star">
            <div class="goods_img"></div>
            <div class="goods_info">
              <div class="goods_price">{{price | priceFilter}}</div>
              <div class="kucun">库存<span>{{num}}</span>件</div>
              <div class="checkre flex-star">
                <span>已选:</span>
                <div>{{showAttr}}</div>
              </div>
            </div>
          </div>

          <div v-for="(item,itemindex) in goods.SKUInfo" class="chose_item">
            <p class="chose_item_tit">{{item.name}}</p>
            <div class="chose_item_cont flex-star">
              <div v-for="(attr,attrindex) in item.items" @click="specificationBtn(attr.name,itemindex,attrindex)"
                :class="[attr.isShow?'':'noneActive',subIndex[itemindex] == attrindex?'productActive':'']">
                {{attr.name}}
              </div>
            </div>
          </div>

          <!-- <div class="num_opt flex-between">
            <span>购买数量</span>
            <div class="numopt flex-star">
              <div class="add">-</div>
              <div>2</div>
              <div class="reduce">+</div>
            </div>
          </div>
          <div class="btn_cont flex-star">
            <input type="button" name="" id="" value="加入购物车" />
            <input type="button" name="" id="" value="马上抢" />
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selectArr: [], //存放被选中的值
        showAttr: "",
        num: 0,
        shopItemInfo: {}, //存放要和选中的值进行匹配的数据
        subIndex: [], //是否选中 因为不确定是多规格还是单规格，所以这里定义数组来判断
        price: '', //选中规格的价钱
      }
    },
    props:{
      isShow:{
        type:Boolean,
        default:false
      },
      goods:{
        type:Object,
        required:true
      }
    },
    filters:{
      priceFilter(price){
        return "￥" + price.toFixed(2);
      }
    },
    beforeCreate(){
    },
    created: function() {
    	for (var i in this.goods.priceInfo) {
    		this.shopItemInfo[this.goods.priceInfo[i].difference] = this.goods.priceInfo[i]; //修改数据结构格式，改成键值对的方式，以方便和选中之后的值进行匹配
    	}

      this.goods.priceInfo.forEach((item,index) => {
        this.num += parseInt(item.stock);
      })
    	this.checkItem();
    	this.specificationBtn("黑色",0,0)
    },
    computed:{
    },
    methods: {
      toggleModal(){
        this.$emit("closeModal",false)
      },
    	specificationBtn(item, n, index){
    		if (this.selectArr[n] != item) {
    			this.selectArr[n] = item;
    			this.subIndex[n] = index;
    		} else {
    			this.selectArr[n] = undefined;
    			this.subIndex[n] = -1; //去掉选中的颜色
    		}

    		var showarr = this.selectArr;
    		var tempTop = [];
    		showarr.forEach((item, i, arr) => {
    			if (item) {
    				tempTop.push(item)
    			}
    		})

    		this.showAttr = tempTop.join(";");
    		this.checkItem();
    		 tempTop = []
    	},
    	checkItem(){
    		var option = this.goods.SKUInfo;
    		var result = []; //定义数组存储被选中的值
    		for (var i in option) {
    			result[i] = this.selectArr[i] ? this.selectArr[i] : '';
    		}

        console.log(result,666666666)


    		if (this.shopItemInfo[result.join(";")]) {
    			this.num = this.shopItemInfo[result.join(";")].stock;
    			this.price = this.shopItemInfo[result.join(";")].price;
    		} else {
    			this.num = 0;
    			this.price = 0;
    		}
    		for (var i in option) {
    			var last = result[i]; //把选中的值存放到字符串last去
    			for (var k in option[i].items) {
    				result[i] = option[i].items[k].name; //赋值，存在直接覆盖，不存在往里面添加name值
    				option[i].items[k].isShow = this.isMay(result); //在数据里面添加字段isShow来判断是否可以选择
    			}

    			result[i] = last; //还原，目的是记录点下去那个值，避免下一次执行循环时避免被覆盖
    		}
    		this.$forceUpdate(); //重绘
    	},
    	isMay(result){
    		for (var i in result) {
    			if (result[i] == '') {
    				return true; //如果数组里有为空的值，那直接返回true
    			}
    		}
    		if (this.shopItemInfo[result.join(";")]) { //匹配选中的数据的库存，若不为空返回true反之返回false
    			return this.shopItemInfo[result.join(";")].stock == 0 ? false : true;
    		}
    	}
    }
  }
</script>

<style scoped="scoped">
  .page_modal {
    width: 100%;
    background: linear-gradient(to right, #fff, #fff) 0 .2rem no-repeat;
    background-size: 100% auto;
    color: #222;
    position: absolute;
    bottom: 0;
  }

  .goods_intro {
    padding: 0 .25rem;
  }

  .goods_intro div.goods_img {
    width: 2rem;
    height: 2rem;
    background: white;
    border: 3px solid #fff;
    border-radius: 4px;
    box-shadow: 0 0 6px rgba(0, 0, 0, .3);
  }

  .goods_info {
    margin-left: .15rem;
  }

  .goods_price {
    color: #feab27;
    font-size: .34rem;
  }

  .kucun {
    margin: .05rem 0;
  }

  .num_opt {
    width: calc(100% - .5rem);
    margin: 0 .25rem;
    padding: .25rem 0;
    border-bottom: 1px solid #eeeeee;
  }

  .numopt div {
    width: .7rem;
    height: .6rem;
    background: #f5f5f5;
    text-align: center;
    line-height: .6rem;
    color: #666;
  }

  .numopt div:nth-child(2) {
    margin: 0 .08rem;
    background: white;
    color: #333;
  }

  .chose_item {
    width: calc(100% - .5rem);
    margin: 0 .25rem;
    border-bottom: 1px solid #eeeeee;
    padding-top: .3rem;
  }

  .chose_item_cont {
    margin-top: .2rem;
  }

  .chose_item_cont div {
    padding: .12rem .24rem;
    background: #f6f4f5;
    border-radius: 5px;
    margin-bottom: .2rem;
  }

  .chose_item_cont div:nth-child(n + 2) {
    margin-left: .2rem;
  }

  .chose_item .chose_item_tit {
    font-size: .3rem;
    font-weight: bold;
  }

  .ui-shade {
    display: none;
  }

  .silderout {
    display: block;
    bottom: 0;
    animation: silderout .25s;
  }

  .btn_cont input {
    height: .8rem;
    width: 50%;
    border: none;
    color: white;
  }

  .btn_cont input:nth-child(1) {
    background: #ff9e01;
    border-radius: .8rem 0 0 .8rem;
  }

  .btn_cont input:nth-child(2) {
    background: #ff6f00;
    border-radius: 0 .8rem .8rem 0;
  }

  .btn_cont {
    width: calc(100% - .5rem);
    margin: 0 .25rem;
    padding: .15rem 0;
  }

  .productActive {
    background: #feab27 !important;
    color: white;
  }

  .cose_modal {
    position: absolute;
    width: .4rem;
    top: .4rem;
    height: .4rem;
    border: 1px solid #615763;
    border-radius: 50%;
    right: .2rem;
    line-height: .4rem;
    text-align: center;
  }

  @keyframes silderout {
    from {
      bottom: -100vh;
    }

    to {
      bottom: 0;
    }
  }

  @keyframes silderin {
    from {
      bottom: vh;
    }

    to {
      bottom: -100vh;
    }
  }

  .modal_cont {
    position: absolute;
    height: 100vh;
    width: 100vw;
  }

  .ui-shade{
    display: block;
  }

  .noneActive {
    background-color: #ccc;
    opacity: 0.4;
    color: #000;
    pointer-events: none;
  }
</style>
